<template>
  <div class="layout page-app">
    <Row>
      <Col span="6"><Button type="primary" icon="md-add" @click="onAppAdd">{{$t('page.app.add')}}</Button></Col>
      <Col span="8" offset="10"><Input v-model="filter" search :placeholder="$t('page.app.search')" /></Col>
    </Row>
    <Divider />
    <Row :gutter="15">
      <Col v-if="apps.list.length===0" span="24" class="center"> {{$t('norecord')}} </Col>
      <Col :sm="24" :md="12" :lg="8" :xl="6" v-for="app in shownList" :key="app.name">
      <Card class="mb-15">
        <p slot="title">{{app.name}}</p>
        <p class="app-remark" v-if="edit.editing&&edit.name===app.name"><Input ref="appnameinput" v-model="edit.remark" type="textarea" :rows="3" maxlength="50" show-word-limit @on-blur="doneRemarkEdit(app.name)"></Input></p>
        <p class="app-remark" v-else @dblclick="onRemarkEdit(app.name)">{{app.remark}}</p>
        <p class="app-icon">
          <Row>
            <Col span="12">
            <Tooltip :transfer="true" :content="$t('page.app.serverable')" v-if="app.serverable">
              <Icon type="md-wifi" size="22" color="green" />
            </Tooltip>
            <Tooltip :transfer="true" :content="$t('page.app.discoverable')" v-if="app.discoverable">
              <Icon type="ios-compass-outline" size="22" color="green" />
            </Tooltip>
            <Tooltip :transfer="true" :content="$t('page.app.taskable')" v-if="app.taskable">
              <Icon type="ios-ionic" size="22" color="green" />
            </Tooltip>
            &nbsp;
            </Col>
            <Col span="12" class="right">
            <ButtonGroup size="small">
              <Tooltip :transfer="true" :content="$t('page.app.config')">
                <Button icon="ios-construct-outline" @click="onConfigEdit(app.name)"></Button>
              </Tooltip>
              <Tooltip :transfer="true" :content="$t('page.app.depends')">
                <Button icon="ios-git-network" @click="onConfigDepend(app.name)"></Button>
              </Tooltip>
              <Tooltip :transfer="true" :content="$t('page.app.nodes')">
                <Button icon="md-share" @click="onViewNodes(app.name)"></Button>
              </Tooltip>
            </ButtonGroup>
            </Col>
          </Row>
        </p>
      </Card>
      </Col>
    </Row>
    <AppAdd ref="appadd" @onRefresh="loadApps"></AppAdd>
    <ConfigTab ref="configtab" :dependable="false"></ConfigTab>
    <ConfigDepend ref="configdepend"></ConfigDepend>
    <NodeView ref="nodeview"></NodeView>
  </div>
</template>

<script>
  import AppAdd from './comp/appadd'
  import ConfigTab from './comp/configtab'
  import ConfigDepend from './comp/configdepend'
  import NodeView from './comp/nodeview'
  export default {
    components: { AppAdd, ConfigTab, ConfigDepend, NodeView },
    data() {
      return {
        apps: {
          list: []
        },
        filter: '',
        edit: {
          editing: false,
          name: '',
          remark: '',
        },
      }
    },
    computed: {
      shownList() {
        let showing = []
        let app
        for (let i in this.apps.list) {
          app = this.apps.list[i]
          app.remark = app.remark || app.name
          if (app.name.indexOf(this.filter) !== -1 || app.remark.indexOf(this.filter) !== -1) {
            showing.push(app)
          }
        }
        return showing
      }
    },
    mounted() {
      this.loadApps()
    },
    methods: {
      loadApps() {
        this.$md.dispatch('app_list').then(data => {
          if (data.retCode === 1) {
            this.apps.list = data.data
          }
        })
      },
      onAppAdd() {
        this.$refs.appadd.show()
      },
      onRemarkEdit(name) {
        let app = this.$collect.findByProp(this.apps.list, 'name', name)
        this.edit.name = app.name
        this.edit.remark = app.remark
        this.edit.editing = true
        this.$nextTick(() => {
          this.$refs.appnameinput[0].focus()
        })
      },
      doneRemarkEdit(name) {
        this.edit.editing = false
        let app = this.$collect.findByProp(this.apps.list, 'name', name)
        if (this.edit.remark === app.remark) return
        // 提交更改
        this.$md.dispatch('app_edit', this.edit).then(data => {
          if (data.retCode === 1) {
            this.$Message.success(this.$t('submitok'))
            let app = this.$collect.findByProp(this.apps.list, 'name', this.edit.name)
            app.remark = this.edit.remark
          }
        })
      },
      onConfigEdit(name) {
        this.$refs.configtab.show(name)
      },
      onConfigDepend(name) {
        this.$refs.configdepend.show(name)
      },
      onViewNodes(name) {
        this.$refs.nodeview.show(name)
      },
    }
  };
</script>

<style scoped>
  .page-app .app-remark {
    height: 72px;
    font-size: 13px;
  }
  .page-app .app-icon {
    margin-top: 16px;
  }
</style>
